<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <p class="shou">管理员注册</p>
    <hr width="100%" color="#808080" size="1"/>
    <div  style="margin-right: 20%; margin-top: 20px; text-align: right;"><p>已有账号？<a style="color: #405bd1; text-decoration: none;" href="./deng.jsp">立即登录</a></p></div>
    <p style="text-align: center; color: red;" >${msg}</p>
    <p v-if="tez" style="text-align: center; color: red;" >对不起，账号已经存在</p>
    <div align="center">
        <el-form  :model="user" ref="user" status-icon class="demo-user"  style="margin-top: 80px; width: 400px" align="center"  :rules="rules">
            <el-form-item label="" prop="username" style="text-align: center;">
                <el-input placeholder="请输入您的账号" v-model="user.username">
                    <template slot="prepend"><i class="el-icon-user-solid"></i></template>
                </el-input>
            </el-form-item>

            <el-form-item label="" prop="password">
                <el-input placeholder="请输入您的密码" v-model="user.password" autocomplete="off">
                    <template slot="prepend"><i class="el-icon-more"></i></template>
                </el-input>
            </el-form-item>

            <el-form-item label="" prop="password2">
                <el-input placeholder="请再次输入您的密码" v-model="user.password2" autocomplete="off">
                    <template slot="prepend"><i class="el-icon-more"></i></template>
                </el-input>
            </el-form-item>

            <el-form-item label="" prop="eml">
                <el-input placeholder="请输入您的邮箱" v-model="user.eml">
                    <template slot="prepend"><i class="el-icon-platform-eleme"></i></template>
                </el-input>
            </el-form-item>

            <el-form-item label="" prop="yan">
                <el-input style="width: 300px;" placeholder="请输入您的验证码" name="checkCode" v-model="user.yan">
                    <template slot="prepend"><i class="el-icon-question"></i></template>
                </el-input>
                <img src="${pageContext.request.contextPath}/sys/generateCheckCode" width="90px" id="checkCodeId" @click="changeImg()" align="absmiddle">
            </el-form-item>

            <el-form-item label="">
                <el-button type="primary" @click="yanzheng2('user')" style="width: 400px;">管理员注册</el-button>
            </el-form-item>

        </el-form>
    </div>





</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.user.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                tez:false,
                visible: false,
                user:{
                    username: '',
                    password: '',
                    password2: '',
                    eml: '',
                    yan: ''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入客户名称', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        {min: 3 ,max: 16,message: '密码长度为3-16之间',trigger: 'blur'}
                    ],
                    password2: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    eml: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    yan: [
                        { required: true, message: '请填写验证码', trigger: 'blur' },
                        {min: 4 ,max: 4,message: '验证码长度为4',trigger: 'blur'}
                    ]
                }
            }
        },
        methods:{
            changeImg(){
                document.getElementById("checkCodeId").src = "${pageContext.request.contextPath}/sys/generateCheckCode?time="+new Date().getTime();
            },
            yanzheng2(user){
                this.$refs[user].validate((valid) => {
                    if (valid) {
                        var that=this
                        axios.request('/ssm_biao7/user/registryController',{params:{
                                username:that.user.username,
                                password:that.user.password,
                                password1:that.user.password1,
                                email:that.user.eml,
                                checkCode:that.user.yan
                            }}).then(function (result) {
                            window.location=result.data
                        })
                    } else {
                        console.log('error submit!!');
                    }
                });

            },
            pass(){
                if(this.password==password2){
                    return false
                }else{
                    return true
                }
            }
        }
    })
</script>
<style scoped>
    .shou{
        margin-top: 50px;
        font-size: 45px;
        text-align: center;
        color: #474646;
    }
    .el-input {
        width: 400px;
    }
    el-form-item__error{
        text-align: center;
    }
</style>
</html>